<template>
	<view class='fall-container'>
  <!-- 左边一列 -->
		<view class='fall-left' v-if="leftList.length" @click.stop="handleDetail">
			<block v-for="item of leftList" :key="item.alumnusId">
				<!--瀑布流内容卡片-->
				<image :src="item.alumnusPhoto" :style="{width: item.width+'px',height:item.height+'px'}" :data-item="item"></image>
				<view class="info" :data-item="item">
					<view class="title" :data-item="item">{{parseTimeFuc(item.alumnusGraduationTime)}}届 {{item.alumnusName}}</view>
					<view class="school" :data-item="item">学校：{{item.alumnusUniversity}}</view>
					<view class="work" :data-item="item">工作：{{item.alumnusCompany}}</view>
				</view>
			</block>
		</view>
		<!--右边一列 -->
		<view class='fall-right' v-if="rightList.length" @click.stop="handleDetail">
			<block v-for="item of rightList" :key="item.alumnusId">
				<!--瀑布流内容卡片-->
				<image :src="item.alumnusPhoto" :style="{width: item.width+'px',height:item.height+'px'}" :data-item="item"></image>
				<view class="info" :data-item="item">
					<view class="title" :data-item="item">{{parseTimeFuc(item.alumnusGraduationTime)}}届 {{item.alumnusName}}</view>
					<view class="school" :data-item="item">学校：{{item.alumnusUniversity}}</view>
					<view class="work" :data-item="item">工作：{{item.alumnusCompany}}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {parseTime} from '@/utils/index'
	export default {
		name: 'waterFall',
		props: {
			list: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				leftList: [],
				rightList: [],
				leftHeight: 0,
				rightHeight: 0,
				itemWidth: 0,
			}
		},
		watch: {
			list: {
				handler: 'initList',
				immediate: true
			}
		},
		methods:{
			initList(val) {
				this.rightHeight = 0
				this.leftHeight = 0
				this.rightList = []
				this.leftList = []
				const _this = this
				const defaultWidth = 350
				val.map((item) => {
					uni.getImageInfo({
						src: item.alumnusPhoto,
						success(res) {
							const {leftHeight,rightHeight} = _this
							const width = res.width
							const height = res.height
							const defaultHeight = Math.round(defaultWidth * height / width)
							if ( leftHeight <= rightHeight) {
								const info = Object.assign({},{...item},{height: uni.upx2px(defaultHeight),width: uni.upx2px(defaultWidth)})
								_this.leftList.push(info)
								_this.leftHeight += defaultHeight
							} else {
								const info = Object.assign({},{...item},{height:uni.upx2px(defaultHeight),width: uni.upx2px(defaultWidth)})
								_this.rightList.push(info)
								_this.rightHeight += defaultHeight
							}
						}
					})
				})
			},
			parseTimeFuc(time) {
				const newTime = parseTime(time)
				return newTime.substring(0,4)
			},
			handleDetail(e) {
				const {alumnusId} = e.target.dataset.item
				uni.navigateTo({
					url: `/pages/schoolfellow/children/detail?alumnusId=${alumnusId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.fall-container {
  width: 100%;
  display: flex;
}

.fall-left {
  display: flex;
  flex-direction: column;
	width: 50%;
	padding: 0 4upx 0upx 20upx;
	box-sizing: border-box;
}

.fall-right {
	width: 50%;
  display: flex;
  flex-direction: column;
	padding: 0 20upx 0upx 4upx;
	box-sizing: border-box;
}
image{
	border-radius:5upx 5upx 0px 0px;
}
.info{
	padding: 6upx 20upx 26upx;
	box-sizing: border-box;
	width: 350upx;
	background-color: #fff;
	margin-bottom: 10upx;
	.title {
		font-size:32upx;
		font-weight:bold;
		color:rgba(51,51,51,1);
		line-height:56upx;
	}
	.school,.work{
		font-size:25upx;
		font-weight:500;
		color:rgba(51,51,51,1);
		line-height:34upx;
	}
}
.hide{
	display: none;
}
</style>
